diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
index 365635643..e1471a5ae 100644
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -1,107 +1,86 @@
 // @flow
 
 import * as React from 'react';
 
-import { assetUrl, assetMetaData } from './asset-meta-data';
+import { assetMetaData } from './asset-meta-data';
 import CyclingHeader from './cycling-header.react';
 import InfoCard from './info-card.react';
 import css from './landing.css';
 import StarBackground from './star-background.react';
+import usePreloadAssets from './use-pre-load-assets.react';
 
 function AppLanding(): React.Node {
+  usePreloadAssets(assetMetaData);
   const [
     hero,
     federated,
     customizable,
     encrypted,
     sovereign,
     openSource,
     lessNoisy,
   ] = assetMetaData;
 
-  React.useEffect(() => {
-    const testWEBP = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
-    const testImg = new Image();
-
-    // preload webp if supported
-    testImg.onload = () => {
-      for (const imageFileName of assetMetaData) {
-        const image = new Image();
-        image.src = `${assetUrl}/${imageFileName.url}.webp`;
-      }
-    };
-
-    // preload png if webp not supported
-    testImg.onerror = () => {
-      for (const imageFileName of assetMetaData) {
-        const image = new Image();
-        image.src = `${assetUrl}/${imageFileName.url}.png`;
-      }
-    };
-
-    testImg.src = `data:image/webp;base64,${testWEBP}`;
-  }, []);
-
   return (
     <>
       <StarBackground />
       <div className={css.app_landing_grid}>
         <div className={css.app_preview}>
           <picture>
             <source srcSet={`${hero.url}.webp`} type="image/webp" />
             <source srcSet={`${hero.url}.png`} type="image/png" />
             <img src={`${hero.url}.png`} alt={hero.alt} />
           </picture>
         </div>
         <div className={css.app_copy}>
           <div className={css.app_copy_wrapper}>
             <CyclingHeader />
             <p className={css.app_landing_subheading}>
               (think &quot;Web3 Discord&quot;)
             </p>
           </div>
 
           <div className={css.tile_grid}>
             <InfoCard
               title={federated.title}
               description={federated.description}
               baseStyle={css.tile_one}
             />
 
             <InfoCard
               title={customizable.title}
               description={customizable.description}
               baseStyle={css.tile_two}
             />
 
             <InfoCard
               title={encrypted.title}
               description={encrypted.description}
               baseStyle={css.tile_three}
             />
 
             <InfoCard
               title={sovereign.title}
               description={sovereign.description}
               baseStyle={css.tile_four}
             />
 
             <InfoCard
               title={openSource.title}
               description={openSource.description}
               baseStyle={css.tile_five}
             />
 
             <InfoCard
               title={lessNoisy.title}
               description={lessNoisy.description}
               baseStyle={css.tile_six}
             />
           </div>
         </div>
       </div>
     </>
   );
 }
 
 export default AppLanding;
diff --git a/landing/use-pre-load-assets.react.js b/landing/use-pre-load-assets.react.js
new file mode 100644
index 000000000..b4796fb42
--- /dev/null
+++ b/landing/use-pre-load-assets.react.js
@@ -0,0 +1,39 @@
+// @flow
+
+import * as React from 'react';
+
+import { assetUrl } from './asset-meta-data';
+
+type Asset = {
+  +alt: string,
+  +url: string,
+  +title: string,
+  +description: string,
+};
+
+function usePreloadAssets(assets: Asset[]) {
+  React.useEffect(() => {
+    const testWEBP = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+    const testImg = new Image();
+
+    // preload webp if supported
+    testImg.onload = () => {
+      for (const { url } of assets) {
+        const image = new Image();
+        image.src = `${assetUrl}/${url}.webp`;
+      }
+    };
+
+    // preload png if webp not supported
+    testImg.onerror = () => {
+      for (const { url } of assets) {
+        const image = new Image();
+        image.src = `${assetUrl}/${url}.png`;
+      }
+    };
+
+    testImg.src = `data:image/webp;base64,${testWEBP}`;
+  }, [assets]);
+}
+
+export default usePreloadAssets;